<template>
	<view class="content">
		<view class="t-box">
			等待支付
		</view>
		<view v-if="area == ''" class="t-box area" @tap="go('select')">
			选择地址
		</view>
		<view v-else class="t-box area main" @tap="go('select')">
			<view>姓名:{{area.name}}
				电话号码:{{area.phoneNumber}}</view>
			<view>
				收货地址:{{area.province}}{{area.city}}{{area.region}}{{area.detailAddress}}
			</view>
		</view>
		<view class="bigbox">
			<view class="order" >
				<view class="top">
					<view class="left">
						订单编号:{{ordersn}}
					</view>
					<view class="right">
						等待支付
					</view>
				</view>
				<view class="center" v-if="orderInfo" v-for="item in orderInfo" :key = "item.id">
					<image :src="item.productSkuPic" mode=""></image>
					<view class="right">
						<view class="a">
							<view class="title">
								{{item.productName}}
							</view>
							<view class="price">
								￥{{item.productPrice}}元
							</view>
						</view>
						<view class="b">
							<view class="b-num">
								<view>
									数量:
								</view>
								<view class="num">
									X{{item.productQuantity}}
								</view>
							</view>
						</view>
						<view class="c">
							<view>
								规格:
							</view>
							<view class="norms">
								<view class="box" v-for="(item1,index) in item.productAttr" :key="index">
									{{item1.key}}:
									{{item1.value}}
								</view>
								<!-- {{item.productAttr}} -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="total">
					合计:{{total}}元
				</view>
				<view class="btn" @tap="buy">
					确认付款
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import mix from "@/pages/mixins/mixins.js"
	import {
		getPreOrderById,
		addPreOrder,
		addConfirmOrder
	
	} from "@/api/Detail/index.js"
	export default {
		data() {
			return {
				orderInfo: '',
				ordersn: '',
				norms: [],
				area: '',
				total:'',
				orderId: ''
			}
		},
		mixins: [mix],
		onShow() {
			this.area = uni.getStorageSync('area');
			// console.log(this.area)
		},
		onLoad(a) {
			if (!this.checkLogins()) {
				return
			}
			getPreOrderById(a.id).then(res => {
				console.log(res)
				this.ordersn = res.data.orderBase.orderSn
				this.orderInfo = res.data.orderItems;
				this.orderId = a.id
				this.total = res.data.orderBase.totalAmount
				this.orderInfo.forEach(el=>{
					el.productAttr = JSON.parse(el.productAttr)
				})
				// var norms = []
				// norms = this.orderInfo.filter(ele => ele.productAttr)
				
				// this.norms = this.orderId.productAttr
				console.log(this.orderInfo)
				// console.log(norms)
				// this.norms = norms
				
			})
		},
		methods: {
			go(val) {
				uni.navigateTo({
					url: `/pages/mine/address/address?type=${val}`
				})
			},
			buy() {
				
					var id = this.orderId
				uni.navigateTo({
					url: `/pages/Detail/pay/pay?orderId=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx 50rpx;

		.t-box {
			font-size: 36rpx;
			color: #494949;
			// height: 88rpx;
			height: 100rpx;
			border-bottom: 2rpx solid #ccc;
			// line-height: 88rpx;
			line-height: 100rpx;
		}

		.area {
			font-size: 28rpx;
			color: #494949;
		}
	}
	.bigbox{
		background-color: #fff;
		box-sizing: border-box;
		padding: 36rpx;
		border-radius: 24rpx;
		background-color: #fff;
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #3e3e3e;
	}

	.order {
		.top {
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #ccc;
			padding: 30rpx 0;
		}

		.center {
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #ccc;
			padding: 30rpx 0;

			.a {
				display: flex;
				justify-content: space-between;
				padding: 18rpx 0;

				.price {
					margin-left: 30rpx;
				}
			}

			.b-num {
				display: flex;
				justify-content: space-between;
				font-size: 22rpx;
				color: #8d8d8d;
				line-height: 30rpx;
			}

			.c {
				display: flex;
				// justify-content: space-between;
				font-size: 22rpx;
				color: #8d8d8d;
				line-height: 30rpx;

				.norms {
					display: flex;
					margin-left: 20rpx;
					.box{
						margin-right: 40rpx;
					}
				}
			}

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}

		

	}
	.bottom {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		line-height: 80rpx;
	
		.btn {
			width: 128rpx;
			height: 54rpx;
			border: 2rpx solid #2d4f43;
			line-height: 54rpx;
			text-align: center;
			border-radius: 10rpx;
		}
	}

	.main {

		line-height: 50rpx !important;
	}
</style>
